<template>
	<view class="member_box ss-m-t-32 ss-p-x-24  box-sizing ss-flex ss-row-between">
		<view class="ss-flex" :style="{marginTop:Object.keys($slots).length?'-32rpx':''}">
			<z-icon name="member-icon" size="48rpx"></z-icon>
			<z-image class="ss-m-l-24" src="/static/bg/bg-mimber-text.png" width="96rpx" height="44rpx" mode="widthFix"></z-image>
			<uv-line direction="col" length="28rpx" color="#D9D9D9" margin="0 16rpx"></uv-line>
			<view v-if="userInfo.vip_end_time && !sheep.$helper.isMembershipExpired(userInfo.vip_end_time)" class="ss-font-24 font-color-gold">{{ sheep.$helper.timeFormat(userInfo.vip_end_time,'yyyy.mm.dd') }} 到期</view>
			<view v-else-if="userInfo.vip_end_time && sheep.$helper.isMembershipExpired(userInfo.vip_end_time)" class="ss-font-24 font-color-gold">会员已到期</view>
			<view v-else class="ss-font-24 font-color-gold">解锁会员享专享优惠</view>
		</view>
		<button v-if="sheep.$store('user').isLogin" @tap="sheep.$router.go('/pages/user/member/center')" :style="{marginTop:Object.keys($slots).length?'-32rpx':''}" class="ss-reset-button vip-btn bg-bgjb font-color-dark2">
			<text v-if="userInfo.vip_end_time && !sheep.$helper.isMembershipExpired(userInfo.vip_end_time)">会员中心 ></text>
			<text v-else-if="userInfo.vip_end_time && sheep.$helper.isMembershipExpired(userInfo.vip_end_time)">立即续费 ></text>
			<text v-else>立即解锁 ></text>
		</button>
		<button v-else @tap="sheep.$router.go('/pages/user/member/center')" :style="{marginTop:Object.keys($slots).length?'-32rpx':''}" class="ss-reset-button vip-btn bg-bgjb font-color-dark2">未登录></button>
	</view>
	<view v-if="Object.keys($slots).length" class="serviceArea ss-radius-16 bg-color-white ss-p-x-32 ss-p-y-24">
		<slot></slot>
	</view>
</template>

<script setup>  
	import sheep from "@/sheep"  
	const userInfo = computed(() => sheep.$store('user').userInfo)
</script>

<style lang="scss" scoped>
	.member_box {
		height: 140rpx;
		width: 100%;
		background-image: url($IMG_URL + '/static/bg/member-bg.png');
		background-size: 100% 100%;
	}
	.serviceArea {
		margin-top:-32rpx;   
		z-index: 9;
		position: relative;
	}
	.vip-btn {
		width: 156rpx;
		height: 58rpx;
		border-radius: 64rpx;
		font-size: 24rpx;
		font-weight: 600;
	}
</style>